<!DOCTYPE html>
<html>
    <head>
        <title>PhotoGallery main page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
        <link rel="shortcut icon" href="styles/images/favicon.ico">
        <link rel="stylesheet" type="text/css" href="styles/common.css">
        <link href='http://fonts.googleapis.com/css?family=Oxygen:400,700' rel='stylesheet' type='text/css'>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCwyB8M2Z5_083GO2hDU5lMqiofzuYw-58&sensor=false"></script>
        <!--[if lt IE 9]>
            <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
        <![endif]-->
        <script src="js/dom.js" type="text/javascript"></script>
        <script src="js/ajax.js" type="text/javascript"></script>
        <script src="js/framework.js" type="text/javascript"></script>
        <style>
            #links,#tmpls {
                height: 100%;
                width: 50%;
                float: left;
            }
            a {
                margin: 10px;
                font-size: 16px;
                position: relative;
                top: 10%;
                background: black;
                padding: 10px !important;
                border-radius: 10px;
            }
            
            a:hover {
                background-color: #024;      
                box-shadow: 1px 1px 10px 1px #000;          
            }
            
            .tmpl-container {
                width: 150px;
                height: 100px;
                background-color: #aa0;
                border-radius: 10px;
            }
            
            .tmpl-container h4 {
                padding: 10px;
            }
            
            .tmpl-container h4 span {
                font-size: 45px;
                font-weight: bold;
            }
            
            .tmpl-row {
                width: 50%;
                height: 100px;
                float: left;
                margin-bottom: 10px;
            }
            
            .side-tmpl-container {
                width: 100%;
                height: 100px;
                text-align: center;
                background-color: #fff;
                border-radius: 10px;
            }
            .maps {
                width: 800px;
                height: 400px;
                position: absolute;
                top: 450px;
                margin: 0 auto;
            }
            #map1,#map2 {
                float: left;
                width:400px;
                height:400px;
            }
            
        </style>
    </head>
    <body>
        <noscript><div class="noscript">You must set your browser to enable Javascript in order to access certain functions of this site.</div></noscript>
        <!-- Main Wrapper -->
        <div id="main-wrapper">
            
            <div id="links">
                <a class="link" href="#">tmpl 1</a>
                <a class="link" href="#">tmpl 2</a>
                <a class="link" href="#">tmpl 3</a>
                <a class="link" href="#">tmpl 4</a>
                <a class="link" href="#">tmpl 5</a>
            </div>
            <div id="tmpl">
                <div class="tmpl-row">
                    <div data-template="tmpl6" class="loader"></div>
                </div>
                <div class="tmpl-row">
                    <div data-template="tmpl7" class="loader"></div>
                </div>
                <div class="tmpl-row">
                    <div data-template="tmpl8" class="loader"></div>
                </div>
                <div class="tmpl-row">
                    <div data-template="tmpl9" class="loader"></div>
                </div>

            </div>
            <div class="maps">
                <div id="map1"></div>
                <div id="map2"></div>
            </div>
            <script>
                
                for (var i = 0; i < 5; i++) {
                    (function (i) {
                        document.getElementsByClassName('link')[i].onclick = function(){
                            var tmplNum = i + 1;
                            framework.showDialogForm('tmpl' + tmplNum);
                        };
                    }(i));
                };
                
                function initialize() {
                  var myLatlng = new google.maps.LatLng(48.927323, 24.656991);
                  var mapOptions = {
                    zoom: 8,
                    center: myLatlng
                  }
                  var map = new google.maps.Map(document.getElementById('map1'), mapOptions);
                
                  var marker = new google.maps.Marker({
                      position: myLatlng,
                      map: map,
                      title: 'Hello World!'
                  });
                }
                
                function initialize1() {
                  var mapOptions = {
                    zoom: 4,
                    center: new google.maps.LatLng(48.927323, 24.656991),
                    mapTypeControl: true,
                    mapTypeControlOptions: {
                      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                    },
                    zoomControl: true,
                    zoomControlOptions: {
                      style: google.maps.ZoomControlStyle.SMALL
                    }
                  }
                  var map = new google.maps.Map(document.getElementById("map2"),
                      mapOptions);
                }
                initialize1();
               initialize();

            </script>
            
        </div>
    </body>
</html>